<template>
  <div class="container">
    <Header/>
<!--    -->
    <div class="mpost">
<!--      文章-->
      <div class="article">
        <h2 class="title">{{ post.title }}</h2>
        <div class="articleHeader">
          <i class="iconfont  icon-yonghu"></i>
          <span> {{post.userId}} </span>

            <i class="iconfont icon-rili1"></i>
            <span>{{post.creatTime}}</span>
        </div>
        <div class="post_main">
           <div v-html="post.content"></div>
<!--          <el-divider />-->
         </div>

     </div>
<!--    点赞-->
      <div class="praise">
           <div class="card_praise_star">
             <i class="iconfont icon-dianzan"></i>
             <span class="praiseNum"> {{praiseNum}} </span>
             <i class="iconfont icon-star1"></i>
             <span class="starNum">  {{starNum}}</span>
           </div>
      </div>
<!--      // comments组件-->
      <div class="markdown-body comment-card" >
         <Comment :comments="comments"  :postId="postId"/>
      </div>

    </div>

  </div>

</template>

<script>
// 为了让markdown转换的文本更好看，使用这个文件进行渲染
import 'github-markdown-css/github-markdown.css'
import {getCommon, selectById} from '@/api/post'
import Comment from '@/components/Comment.vue' // 引入评论组件
export default {
  name: 'BlogDetail',
  components: {
    Comment
  },
  data() {
    return {

      // 点赞数
      praiseNum:1 ,
      //收藏数
      starNum:1 ,
      comments:{} ,
      postId:1,
      post: {
        id: '',
        title: '',
        content: '',
        creatTime:'' ,
        userId:'' ,

      }
    }
  },
  mounted() {
    this.postId = this.$route.params.postId;
    getCommon({
      postId:this.postId // 发送编码后的消息
    }).then(response => {
      // 接受返回的名称
      const { data } = response
      this.comments = data
      console.log(data)

    }).catch(_error => {
      this.messages.push(`ChatGPT: 服务异常！`)

    })
    console.log("postId:", this.postId);

  } ,
  created() {
    // 从路由参数中获取博客ID
    const postId = this.$route.params.postId

    // 调用selectById函数获取博客详情
    selectById({postId: postId})
      .then(response => {
        // 从响应中提取博客数据
        const post = response.data

        // 使用获取的博客详情更新组件数据
        this.post.postId = post.postId
        this.post.title = post.title
        this.post.content = post.content
        this.post.creatTime = post.creatTime
        this.post.userId = post.userId

        // 渲染Markdown内容
        const markDownIT = require('markdown-it')
        const md = new markDownIT()
        const result = md.render(post.content)
        this.post.content = result
      })
      .catch(error => {
        // 处理错误，例如向用户显示错误消息
        console.error('获取博客详情时出错：', error)
      })
  },
  methods: {
    messageHandel() {
      this.centerDialogVisible = true
    }
  }
}

</script>

<style scoped lang="scss">
.container {
  background: rgb(228, 230, 235);
}
.mblog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 760px;
  margin: 10px 15px;

   }
 .el-dialog__body{
  padding: 0 !important

    }
.mpost {



  // 文章樣式

  .article {
    margin: 2vh auto;
    background: white;
    box-shadow:  1px 1px gray;
    width: 80vw;
    padding: 2vh;
    border-radius: 3px;


// 文章主躰
    .post_main {
      width: 80vw;
      height: 60vh;
      margin: 0 auto;
    }

    //文章頭部樣式
    .articleHeader {
      display: inline-flex;
      margin-bottom: 2vh;
      .icon-rili1 {
        margin-left: 3vw;
      }




    }
    .title {
       text-align: left;
    }
  }


  .praise {

    margin: 2vh auto;
    background: white;
    box-shadow:  1px 1px gray;
    width: 80vw;
    padding: 2vh;
    border-radius: 3px;

    .card_praise_star {
         width: 40vw;
         margin: 0 auto;
      text-align: center;
    }
  }

  .comment-card {
    border-radius: 3px;
    margin: 0 auto;
    background: white;
    box-shadow:  1px 1px gray
  ;
    width: 80vw;
    margin-bottom: 5vh;
  }



}

</style>
